<template>
  <div>
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="100px"
      v-loading="formLoading"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="用户id" prop="userId">
            <el-input v-model="formData.userId" disabled placeholder="请输入用户id" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="单位名称" prop="deptName">
            <el-input v-model="formData.deptName" placeholder="请输入单位名称" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="单位类型" prop="deptType">
            <el-select v-model="formData.deptType" placeholder="请选择单位类型">
              <el-option
                v-for="dict in getStrDictOptions(DICT_TYPE.OBLIGEE_TYPE)"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select> </el-form-item
        ></el-col>
        <el-col :span="12">
          <el-form-item label="单位证件类型" prop="deptCertificateType">
            <el-select v-model="formData.deptCertificateType" placeholder="请选择单位证件类型">
              <el-option
                v-for="dict in getStrDictOptions(DICT_TYPE.ID_TYPE)"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select> </el-form-item
        ></el-col>
        <el-col :span="12">
          <el-form-item label="单位证件号" prop="deptCertificate">
            <el-input v-model="formData.deptCertificate" placeholder="请输入单位证件号" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="单位电话" prop="deptPhone">
            <el-input v-model="formData.deptPhone" placeholder="请输入单位电话" /> </el-form-item
        ></el-col>
        <el-col :span="12">
          <el-form-item label="单位地址" prop="deptAddress">
            <el-input v-model="formData.deptAddress" placeholder="请输入单位地址" /> </el-form-item
        ></el-col>

        <el-col :span="12">
          <el-form-item label="法人名称" prop="corporationName">
            <el-input
              v-model="formData.corporationName"
              placeholder="请输入法人名称"
            /> </el-form-item
        ></el-col>

        <el-col :span="12">
          <el-form-item label="法人证件类型" prop="corporationCertificateType">
            <el-select
              v-model="formData.corporationCertificateType"
              placeholder="请选择法人证件类型"
            >
              <el-option
                v-for="dict in getStrDictOptions(DICT_TYPE.ID_TYPE)"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select> </el-form-item
        ></el-col>

        <el-col :span="12">
          <el-form-item label="法人证件号" prop="corporationCertificate">
            <el-input
              v-model="formData.corporationCertificate"
              placeholder="请输入法人证件号"
            /> </el-form-item
        ></el-col>
        <el-col :span="12">
          <el-form-item label="经办人" prop="operator">
            <el-input v-model="formData.operator" placeholder="请输入经办人" /> </el-form-item
        ></el-col>
        <el-col :span="12">
          <el-form-item label="经办人电话" prop="operatorPhone">
            <el-input
              v-model="formData.operatorPhone"
              placeholder="请输入经办人电话"
            /> </el-form-item
        ></el-col>
        <el-col :span="24">
          <el-form-item label="备注" prop="remark">
            <el-input v-model="formData.remark" placeholder="请输入备注" type="textarea" />
          </el-form-item>
        </el-col>
        <!-- <el-col :span="12">
          <el-form-item label="状态" prop="status">
            <el-radio-group v-model="formData.status">
              <el-radio
                v-for="dict in getStrDictOptions(DICT_TYPE.SYS_STATUS)"
                :key="dict.value"
                :value="dict.value"
              >
                {{ dict.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col> -->
      </el-row>
    </el-form>

    <div style="text-align: center">
      <XButton :title="t('common.save')" type="primary" @click="submitForm()" />
    </div>
  </div>
</template>
<script setup lang="ts">
import { getStrDictOptions, DICT_TYPE } from '@/utils/dict'
import { MineInfoApi, MineInfoVO } from '@/api/zszx/mineinfo'
import { useUserStore } from '@/store/modules/user'
/** 我的单位信息 表单 */
defineOptions({ name: 'UserDeptInfo' })

const userStore = useUserStore()

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用

const formData = ref({
  id: undefined,
  userId: userStore.user.id,
  deptName: undefined,
  deptType: undefined,
  deptCertificateType: undefined,
  deptCertificate: undefined,
  deptPhone: undefined,
  deptAddress: undefined,
  corporationName: undefined,
  corporationCertificateType: undefined,
  corporationCertificate: undefined,
  operator: undefined,
  operatorPhone: undefined,
  remark: undefined,
  status: undefined
})
const formRules = reactive({
  userId: [{ required: true, message: '用户id不能为空', trigger: 'blur' }],
  deptName: [{ required: true, message: '单位名称不能为空', trigger: 'blur' }]
})
const formRef = ref() // 表单 Ref

const getList = async () => {
  formLoading.value = true
  try {
    const data = await MineInfoApi.getMy()
    if (data) {
      formData.value = data
    }
  } finally {
    formLoading.value = false
  }
}
getList()

const submitForm = async () => {
  // 校验表单
  await formRef.value.validate()
  // 提交请求
  formLoading.value = true
  try {
    const data = formData.value as unknown as MineInfoVO
    if (formData.value.id) {
      console.log('更新',data)
      await MineInfoApi.updateMy(data)
      message.success(t('common.updateSuccess'))
    } else {
      await MineInfoApi.createMy(data)
      message.success(t('common.createSuccess'))
    }
  } finally {
    formLoading.value = false
  }
}

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    id: undefined,
    userId: undefined,
    deptName: undefined,
    deptType: undefined,
    deptCertificateType: undefined,
    deptCertificate: undefined,
    deptPhone: undefined,
    deptAddress: undefined,
    corporationName: undefined,
    corporationCertificateType: undefined,
    corporationCertificate: undefined,
    operator: undefined,
    operatorPhone: undefined,
    remark: undefined,
    status: undefined
  }
  formRef.value?.resetFields()
}
</script>
